<template>
<div class="Galary">
    <ly-tab class="tabClolor" v-model="selectedId" :items="items" :options="options" @change="handleClick">
    </ly-tab>
    <div class="cate">
        <span>全部</span>
        <span>其他</span>
    </div>
    <component :is="type" :imgList='imgList'></component>
</div>
</template>

<script>
//	引入组件
import galaryContent from './galaryContent'
import {
    mapState
} from 'vuex'

//	定义输出组件name

export default {
    name: 'detailGalary',
    props: {
        galaryList: Array,
        imgList: Array,
        addressList: Array
    },
    data() {
        return {
            type: "galaryContent",

            selectedId: 0,
            items: [],
            options: {
                activeColor: '#1d98bd'
                // 可在这里指定labelKey为你数据里文字对应的字段
            },
        }
    },

    watch: {
        galaryList: {
            handler: function (o, n) {
                if (this.galaryList.length > 0) {
                    for (let i = 0; i < this.galaryList.length; i++) {
                        let item = {
                            label: this.galaryList[i]
                        }
                        this.items.push(item)
                    }
                }
            },
            immediate: true
        }

    },
    created() {
        //  this.loopGalaryList() 
        this.f()
    },
    mounted() {},
    components: {
        galaryContent,
    },
    methods: {
        f() {
            // console.log(this.$router.params)
        },
        handleClick(item, index) {

            console.log(index)
            this.$store.state.index = index
        },
        // loopGalaryList(){
        //    for(let i=0; i<this.galaryList.length;i++){
        //      let item={label:this.galaryList[i]}
        //      this.items.push(item)

        //    }

        // },
    }
}
</script>

<style scoped>
.Galary {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 200%;
    position: absolute;
    top: 30px;
    background-color: rgb(255, 255, 255);
    z-index: 301;
}

.cate {
    height: 25px;
    margin-top: 5px;
}

.tabClolor {
    width: 100%;
}
</style>
